<!--
  ~ Copyright 2019 ABSA Group Limited
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<nav *ngIf="!(isEmbedded() | async)" class="navbar navbar-expand navbar-dark bg-dark">
    <div class="navbar navbar-expand-md sticky-top">
        <a class="navbar-item" (click)="onHomeClick()">
            <img class="spline-icon-menu" src="logo.png">
        </a>
    </div>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="title">
            Data Lineage Tracking And Visualization
        </div>
    </div>
</nav>

<div>
    <ol class="breadcrumb">
        <li class="breadcrumb-item" [ngClass]="{ 'active': (isActive('dashboard') | async)}">
            <a (click)="onHomeClick()">Dashboard</a>
        </li>
        <li class="breadcrumb-item"
            [ngClass]="{ 'active': (isActive('lineage-overview') | async), 'display-none': !(isVisible('lineage-overview') | async)}">
            <a (click)="onLineageOverviewClick()"> Lineage Overview </a>
        </li>
        <li class="breadcrumb-item"
            [ngClass]="{ 'active': (isActive('lineage-detailed') | async), 'display-none': !(isVisible('lineage-detailed') | async)}">
            <a>Detailed Lineage</a>
        </li>
    </ol>
</div>
